Twig filters

You can modify a variable using a filter. A filter is used with a | between the variable and the filter. You can use multiple filters in sequence to achieve the desired value of the variable. The output of one filter is passed to the next filter. This way, you can chain multiple filters together. In the example below, we turn an array into a string, separated by '-', which we then convert to uppercase.

1{% set foo = ['foo', 'bar'] %}
2{{ foo|join(' - ')|upper }}
3{# result: 'FOO - BAR' #}

|t (translate string)

To make text translatable within a template, you can add |t after the text. For example, an "add to cart" button can be made translatable as follows.

1<button class="btn btn-success">
2  {{"Add to cart"|t}}
3</button>

In our editor, there is also a shortcut to add this formatting to a string. Select the text you want to make translatable and press ALT+T at the same time (Mac: OPTION+T).

|keys

twig docs: https://twig.symfony.com/doc/3.x/filters/keys.html

When you are looking for data in a dump, it can sometimes be very confusing to scroll through all the nested data. That’s why the |keys filter is useful.

For example, if you want to view all the keys of the text blocks object, you can do the following.

1{{dump(blocks|keys)}}

You will now see an array containing only the keys of all entries within blocks.

|date

twig docs: https://twig.symfony.com/doc/3.x/filters/date.html

|date_modify

twig docs: https://twig.symfony.com/doc/3.x/filters/date_modify.html

|upper

twig docs: https://twig.symfony.com/doc/3.x/filters/lower.html

|lower

twig docs: https://twig.symfony.com/doc/3.x/filters/upper.html

|first

twig docs: https://twig.symfony.com/doc/3.x/filters/first.html

|last

twig docs: https://twig.symfony.com/doc/3.x/filters/last.html

|length

twig docs: https://twig.symfony.com/doc/3.x/filters/length.html

|merge

twig docs: https://twig.symfony.com/doc/3.x/filters/merge.html

|replace

twig docs: https://twig.symfony.com/doc/3.x/filters/replace.html

With replace, you can replace a part of text with another text. By using an object where the key is what you want to replace and the value is what you want it to become, you can use this.

Parameters

Use

1// input: Blauw wit vest ([label])
2
3{{ product.name|replace({ "[label]": "Sold out" }) }}
4
5// output: Blauw wit vest (Sold out)

|price

The price filter adds formatting to the variable you apply it to. This ensures you always get the correct structure and the correct currency symbol.

Parameters

Use

Default

1{{ product.price|price }}

without currency symbol

1{{ product.price|price(true, '') }}

|image

The image filter is a utility created for Quicq. It transforms the image URL from the database into a Quicq URL. You can also pass Quicq URL parameters to this function. Note that using this filter in combination with Quicq ensures that the full-size image is always used. So, if you want to create a 400x400 thumbnail from a 400x400 image via Quicq, you will need to add the parameters for this.

Parameters

The parameters you can use in this filter are the same as the parameters described in:

https://afosto.com/nl/docs/apps/quicq/afbeeldingen-bewerken-via-url/. You pass these as an object to the filter.

Use

Default

1{{ product.image_default.filename|image }}

With parameters

1{{ product.image_default.thumbs.400|image({ "w": 400, "h": 400, "q": 20, "b": 3 }) }}